import Vue from 'vue';
import VueRouter, { RouteConfig } from 'vue-router';

import List from '../views/List.vue';
import Demo from '../demo/demo.vue';
import Index from '../views/custom/Index.vue';
import Home from '../views/custom/Home.vue';
import Login from '../views/custom/Login.vue';

Vue.use(VueRouter);

const routes: RouteConfig[] = [

  {
    path: '/views',
    component: () => import('../views/index.vue'),
    redirect: '/landingv1',
    children: [
      {
        path: '/demos',
        component: () => import('../views/Home.vue'),
      },
      {
        path: '/landingv1',
        component: () => import('../views/landingOne.vue'),
      },
      {
        path: '/landingv2',
        component: () => import('../views/landingTwo.vue'),
      },
      {
        path: '/landingv3',
        component: () => import('../views/landingThree.vue'),
      },
      {
        path: '/landingv4',
        component: () => import('../views/landingFour.vue'),
      },
      {
        path: '/landingv5',
        component: () => import('../views/landingFive.vue'),
      },
      {
        path: '/landingv6',
        component: () => import('../views/landingSix.vue'),
      },
      {
        path: '/landingv7',
        component: () => import('../views/landingSeven.vue'),
      },
      {
        path: '/landingv8',
        component: () => import('../views/landingEight.vue'),
      },
      {
        path: '/landingv9',
        component: () => import('../views/landingNine.vue'),
      },
      {
        path: '/landingv10',
        component: () => import('../views/landingTen.vue'),
      },
      {
        path: '/landingv11',
        component: () => import('../views/landingEleven.vue'),
      },
    ],
  },


  {
    path: '/',
    redirect: '/',
    component:  Index,
    children: [
      {
        path: '/',
        component: Home,
      },
      {
        path: '/login',
        component: Login,
      },
    ],
  },
  {
    path: '/list',
    name: 'List',
    component: List,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
];

const router = new VueRouter({
  base: process.env.BASE_URL,
  routes,
});

export default router;
